<template>
  <!-- <div class="flex justify-center items-center pt-20">
    <div id="dplayer" class="aspect-video w800"></div>
  </div> -->
  <div class="p20 overflow-auto">
    <el-space direction="vertical" fill>
      <el-card>
        <template #header>
          <div class="card-header">
            <span>DPlayer</span>
            <a href="https://dplayer.diygod.dev/zh/guide.html" target="_blank" rel="noopener noreferrer">
              官方文档：https://dplayer.diygod.dev/zh/guide.html
            </a>
          </div>
        </template>
        <div class="flex">
          <div id="dplayer" class="aspect-video w800"></div>
          <div class="pl-10">
            <el-input v-model="url" style="width: 32vw; margin-right: 10px" placeholder="Please input url" />
            <el-button type="primary" @click="playVideo">播放</el-button>
          </div>
        </div>
      </el-card>
    </el-space>
  </div>
</template>
<script setup lang="ts">
import DPlayer from 'dplayer'
const url = ref('https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4')
// const url = ref('')
let dp: DPlayer
const playVideo = () => {
  dp.video.src = url.value
  dp.play()
}
const initPlayer = () => {
  dp = new DPlayer({
    container: document.getElementById('dplayer'),
    airplay: true,
    video: {
      url: url.value,
    },
  })
}
const destroyPlay = () => {
  if (dp) {
    dp.destroy()
  }
}
onMounted(() => {
  initPlayer()
})
onUnmounted(() => {
  destroyPlay()
})
</script>
<style scoped lang="scss"></style>
